<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="list"></div>

    <script>

        const list = document.getElementById('list')

        const users = [
            { name: 'jack', age: 20 },
            { name: 'lili', age: 19 },
            { name: 'lucy', age: 21 },
            { name: 'wukong', age: 22 },
            { name: 'tom', age: 18 },
        ];

        // 数据可视化
        // return lis.join('')
        function renderTable(users) {
            const lis = users.map(el => `<li>${el.name}-${el.age}</li>`);
            return `<ul>${lis.join('')}</ul>`;
        }

        console.log(renderTable(users))

        list.innerHTML = renderTable(users);



    </script>
</body>

</html>